<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<style>
    body {
        padding-left: 13%;
        position: relative;
        top: 0;
        left: 0;
    }

    .layui-table-cell,
    td {
        text-align: center;
    }

    th,
    td {
        height: 60px;
    }

    .layui-table-header thead {
        background-color: rgba(0, 0, 0, 0.5);
        /* color: white; */
        position: sticky;
        top: 0px;
    }

    h1 {
        font-size: 30px;
        font-weight: 600;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 37%;
    }

    .layui-form-label {
        font-size: 16px;
        font-weight: 600;
    }

    #update {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 60%;
        top: 350px;
        transform: translate(-50%, -50%);
        /* background: rgb(209, 47, 47, 0.5); */
        background-color: aqua;
        z-index: 9999;
        display: none;
    }

    .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 999;
    }
</style>

<body>
    <h1>用户列表</h1>
    <label class="layui-form-label">用户名: </label>
    <div class="layui-input-inline">
        <input type="text" name="password" required lay-verify="required" placeholder="请输入你的账号" autocomplete="off"
            class="layui-input" id="name" />
    </div>
    <button class="layui-btn layui-btn-radius" id="Search">搜索</button>

    <!-- 更新 -->
    <div class="mask"></div>
    <div id="update">

        <div class="layui-input-inline">
            ID: <input type="text" name="id" required lay-verify="required" placeholder="id" autocomplete="off"
                class="layui-input" id="id">
        </div>
        <br>
        <div class="layui-input-inline">
            用户名:<input type="text" name="password" required lay-verify="required" placeholder="用户名" autocomplete="off"
                class="layui-input" id="user-name">
        </div>
        <br>
        <div class="layui-input-inline">
            性别: <input type="text" name="password" required lay-verify="required" placeholder="性别" autocomplete="off"
                class="layui-input" id="sex">
        </div>
        <!-- <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" />
            <input type="radio" name="sex" value="2" title="女" />
          </div>
        </div> -->
        <br> 
        <div class="layui-input-inline">
            年龄:<input type="text" name="password" required lay-verify="required" placeholder="年龄" autocomplete="off"
                class="layui-input" id="age">
        </div>
        <br>
        省市:
        <select id="province">
            <option value="北京">北京</option>
            <option value="南京">南京</option>
            <option value="天京">天京</option>
        </select>
        <select id="city">
            <option value="东海">东海</option>
            <option value="西海">西海</option>
            <option value="北海">北海</option>
        </select>
        <select id="area">
            <option value="北冰洋">北冰洋</option>
            <option value="大西洋">大西洋</option>
            <option value="南冰洋">南冰洋</option>
        </select> <br>
        <div class="layui-input-inline"> 
            详址:<input type="text" name="password" required lay-verify="required"
                placeholder="详细地址" autocomplete="off" class="layui-input" id="detail_address">
        </div> <br>
        图片:<input type="text" id="img" /><br />

        <button class="layui-btn layui-btn-radius" id="Add_three">添加</button>
        <button class="layui-btn layui-btn-radius" id="Close_three">关闭</button>

    </div>



    <table id="userlist" style="margin: auto; margin-top: 20px" lay-filter="userlist"></table>
</body>
<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" id="del" lay-event="del"
            >删除</a
        >
    </script>
<script type="text/html" id="tab-img">
        <img src="{{d.img}}" alt="" width="50px">
    </script>
<script>

    $('#Close_three').click(function () {
        $('#update').hide();
        $('.mask').hide()
    })


    layui.use('table', function () {
        $('#Add_three').click(addbtn)
        var table = layui.table
        //第一个实例
        table.render({
            elem: '#userlist',
            width: 1000,
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('token'),
            },
            url: 'https://api.zzgoodqc.cn/api/user', //数据接口
            page: true, //开启分页
            limit: 10,
            limits: [15, 30, 50, 100],
            cols: [
                [
                    //表头
                    {
                        field: 'id',
                        title: 'ID',

                        sort: true,
                        fixed: 'left',
                    },
                    {
                        field: 'img',
                        title: '头像',
                        templet: '#tab-img'
                    },
                    {
                        field: 'username',
                        title: '用户名'
                    },
                    {
                        field: 'sex',
                        title: '性别',
                        sort: true
                    },
                    {
                        field: 'detail_address',
                        title: '地址'
                    },
                    {
                        field: 'created_at',
                        title: '创建时间'
                    },
                    {
                        field: 'updated_at',
                        title: '更新时间'
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 150,
                        align: 'center',
                        toolbar: '#barDemo',
                    },
                ],
            ],
            parseData: function (res) {
                return {
                    code: 0,
                    msg: res.msg,
                    count: res.count,
                    data: res.data,
                }
            },
        })

        table.on('tool(userlist)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
            var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') {
                //查看
                //do somehing
            } else if (layEvent === 'del') {
                //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del() //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index)
                    var id = data.id
                    $.ajax({
                        url: 'https://api.zzgoodqc.cn/api/user/' + id,
                        type: 'DELETE',
                        headers: {
                            Authorization:
                                'Bearer ' + localStorage.getItem('token'),
                        },
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.message)
                            }
                        },
                        dataType: 'json  ',
                    })
                    //向服务端发送删除指令

                })
            } else if (layEvent === 'edit') {
                //编辑
                //do something
                $('#update').show()
                $('.mask').show()
                $('#id').val(data.id)
                $('#user-name').val(data.username)
                $('#sex').val(data.sex ?? '')
                $('#age').val(data.age ?? '')
                $('#province').val(data.province ?? '')
                $('#city').val(data.city ?? '')
                $('#area').val(data.area ?? '')
                $('#detail_address').val(data.detail_address ?? '')
                $('#img').val(data.img ?? '')

                //同步更新缓存对应的值
                obj.update({
                    username: '123',
                    title: 'xxx',
                })
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi,头部工具栏扩展的右侧图标。')
            }
        })
        function addbtn() {
            var jid = $('#id').val()
            let date = {
                sex: $('#sex').val(),
                age: $('#age').val(),
                province: $('#province').val(),
                city: $('#city').val(),
                area: $('#area').val(),
                detail_address: $('#detail_address').val(),
                img: $('#img').val(),
            }
            console.log(jid)
            console.log(date);
            $.ajax({
                url: 'https://api.zzgoodqc.cn/api/user/' + jid,
                type: 'PUT',
                data: date,
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('token'),
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res)
                    if (res.code == 200) {
                        $('#update').hide()
                        $('.mask').hide()
                        layer.alert(res.message)
                        table.reload('userList', {})
                    } else {
                        alert(res.message)
                    }
                },
            })
        }
    })

    // 搜索
    var key = "";
    $("#Search").click(function () {
        $.ajax({
            type: "get",
            url: "https://api.zzgoodqc.cn/api/searchUser?page=1&limit=100",
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('token'),
            },
            data: {
                key: $("#name").val(),
            },
            dataType: "json",
            success: function (res) {
                let add = "";
                for (let i in res.data) {
                    add += `
                    <tr data-index="0" class="">
                        <td data-field="id" data-key="1-0-0" class="">
                            <div class="layui-table-cell laytable-cell-1-0-0">${res.data[i].id}</div>
                        </td>
                        <td data-field="img" data-key="1-0-1" class="">
                            <div class="layui-table-cell laytable-cell-1-0-1"><img src="${res.data[i].img}" alt=""></div>
                        </td>
                        <td data-field="username" data-key="1-0-2" class="">
                            <div class="layui-table-cell laytable-cell-1-0-2">${res.data[i].username}</div>
                        </td>
                        <td data-field="sex" data-key="1-0-3" class="">
                            <div class="layui-table-cell laytable-cell-1-0-3">${res.data[i].sex}</div>
                        </td>
                        <td data-field="detail_address" data-key="1-0-4" class="">
                            <div class="layui-table-cell laytable-cell-1-0-4">${res.data[i].detail_address}</div>
                        </td>
                        <td data-field="created_at" data-key="1-0-5" class="">
                            <div class="layui-table-cell laytable-cell-1-0-5">${res.data[i].created_at}</div>
                        </td>
                        <td data-field="updated_at" data-key="1-0-6" class="">
                            <div class="layui-table-cell laytable-cell-1-0-6">${res.data[i].updated_at}</div>
                        </td>
                        <td data-field="7" data-key="1-0-7" align="center" data-off="true" class="layui-table-col-special">
                            <div class="layui-table-cell laytable-cell-1-0-7"> 
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> 
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> 
                            </div>
                        </td>
                    </tr>
                   `;
                }
                $("tbody").html(add);
            },
        });
    });
</script>

</html>